<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 600px;
      border: 2px solid red;
      margin: 50px;
      /* 触发bfc */
      overflow: hidden;
    }

    /* 设置浮动，让文字环绕 */
    img {
      float: left;
      border: 1px solid yellow;
      margin: 10px;

      border-radius: 50%;

      /* 修改环绕效果 */
      shape-outside: circle(50%);
      /* 设置圆心 */
      shape-outside: circle(50% at 50% 50%);
      /* 指定路径坐标 x y */
      shape-outside: polygon(0 0, 59% 0, 36% 18%, 42% 28%, 75% 30%, 90% 43%, 97% 58%, 88% 80%, 94% 97%, 0 97%);
    }

    .use {
      white-space: pre;
      ;
    }
  </style>

</head>

<body>
  <div>
    <img src="./img.png" alt="">
    <span>默认按照边框环绕-默认按照边框环绕默认按照边框环绕默认按照边框环绕
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
      是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</span>
  </div>

  <section class="use">
    <h2> shape-outside 的用法</h2>
    <p> shape-outside 的主要函数值有四个，分别是：</p>

    inset()：表示浮动文字按照上、右、下、左在浮动元素上的偏移量得出的矩形边缘进行围绕
    circle()：表示浮动文字按照 shape-radius 为半径画出的圆形的外边缘围绕
    ellipse()：表示浮动文字按照 x 轴以 xr 为半径，y 轴以 yr 为半径画出的椭圆形的外边缘围绕
    polygon(x1 y1, x2 y2, ..., xn yn)：表示浮动元素按照，通过给定的坐标点的值连接画出的不规则形状的边缘进行围绕

    polygon 参数说明：
    x1：表示第一个点在x轴的坐标位置
    y1：表示第一个点在y轴的坐标位置
    x2：表示第二个点在x轴的坐标位置
    y3：表示第二个点在y轴的坐标位置
    xn：表示第n个点在x轴的坐标位置
    yn：表示第n个点在y轴的坐标位置

  </section>
</body>

</html>